<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 标题 -->
        <h3 class="reportFormsTitle">{{ yearMonth }} 月人事报表</h3>
        <!-- 标签页 -->
        <el-tabs value="first">
          <el-tab-pane label="考勤统计" name="first">
            <!-- 导出按钮 -->
            <el-row type="flex" justify="end" style="margin-bottom:10px">
              <el-button type="primary" @click="exportAttendances">导出</el-button>
            </el-row>
            <!-- 表格 -->
            <el-table :data="tableData" style="width: 100%" border stripe>
              <el-table-column prop="name" label="姓名" width="120" align="center" />
              <el-table-column prop="workNumber" label="工号" width="120" align="center" />
              <el-table-column prop="mobile" label="手机号" width="180" align="center" />
              <el-table-column prop="leaveDays" label="事假天数" align="center" />
              <el-table-column prop="dayOffLeaveDays" label="调休天数" align="center" />
              <el-table-column prop="normalDays" label="正常天数" align="center" />
              <el-table-column prop="laterTimes" label="迟到次数" align="center" />
              <el-table-column prop="earlyTimes" label="早退次数" align="center" />
              <el-table-column prop="hoursPerWorkDay" label="日均时长(工作日)" align="center" />
              <el-table-column prop="absenceDays" label="旷工天数" align="center" />
              <el-table-column label="是否全勤" align="center">
                <template #default="{row}">
                  {{ row.isFullAttendanceint === 1 ? '是' : '否' }}
                </template>
              </el-table-column>
              <el-table-column prop="actualAtteOfficialDays" label="实际出勤天数" width="120" align="center" />
              <el-table-column prop="workingDays" label="应出勤工作日" width="120" align="center" />
              <el-table-column prop="salaryStandards" label="计薪标准" align="center" />
              <el-table-column prop="salaryOfficialDays" label="计薪天数" align="center" />
            </el-table>
            <!-- 归档报表 新建报表 -->
            <el-row type="flex" justify="center" class="reportFormsFooter">
              <el-tooltip class="item" effect="dark" content="将当前报表存放到归档,归档可以多次,但值保留最后一次" placement="top-start">
                <el-button type="primary" @click="archives">归档{{ yearMonth }}月份报表</el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="开始做下个月考勤" placement="top-start">
                <el-button type="primary" @click="newReport">新建报表</el-button>
              </el-tooltip>

            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
import { reportFormList, archives, newReports } from '@/api/attendances'
export default {
  props: {
    yearMonth: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      tableData: []// 月报表数据
    }
  },
  created() {
    console.log(this.yearMonth)
    this.reportFormList()
  },
  methods: {
    // 获取 月人事报表数据
    async reportFormList() {
      this.tableData = await reportFormList({ atteDate: this.yearMonth })
      console.log(this.tableData)
    },
    // 导出
    async exportAttendances() {
      // 这里是按钮被点击, 可以就在这里单独引入需要的库
      const { export_json_to_excel } = await import('@/vendor/Export2Excel')
      // console.log(export_json_to_excel)

      const dict = {
        '姓名': 'name',
        '工号': 'workNumber',
        '手机号': 'mobile',
        '事假天数': 'leaveDays',
        '调休天数': 'dayOffLeaveDays',
        '正常天数': 'normalDays',
        '迟到次数': 'laterTimes',
        '早退次数': 'earlyTimes',
        '日均时长(工作日)': 'hoursPerWorkDay',
        '旷工天数': 'absenceDays',
        '是否全勤': 'isFullAttendanceint',
        '实际出勤天数': 'actualAtteOfficialDays',
        '应出勤工作日': 'workingDays',
        '计薪标准': 'salaryStandards',
        '计薪天数': 'salaryOfficialDays'
      }
      // console.log(Object.keys(dict))

      const userData = this.tableData.map(data => {
        return this.object2Arrayy(data, dict)
      })

      // console.log(userData)

      export_json_to_excel({
        header: Object.keys(dict),
        data: userData
      })
    },
    // 字典查询
    object2Arrayy(data, dict) {
      const newData = []
      for (const key in dict) {
        const enKey = dict[key]
        const value = data[enKey]
        newData.push(value)
      }
      return newData
    },
    // 月度考勤记录归档
    async archives() {
      this.$confirm('您确认归档该月报表吗, 是否继续?', `归档${this.yearMonth}报表`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await archives({ atteDate: this.yearMonth })
        this.$message.success('归档成功')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消归档'
        })
      })
    },
    // 新建报表
    async newReport() {
      this.$confirm('您确认新建报表吗？新建成功后,已归档数据不可修改, 是否继续?', `新建下个月报表`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await newReports({
          atteDate: this.yearMonth,
          yearMonth: this.yearMonthAddOne(this.yearMonth)
        })
        // 回到考勤首页,刷新数据
        this.$router.push({ path: '/attendances' })
        this.$message.success('新建报表成功')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消新建'
        })
      })
    },
    // yearMonthAdd 年月增加函数封装
    yearMonthAddOne(yearMonth) {
      let year = yearMonth.substr(0, 4)
      let month = yearMonth.substr(4, 2)
      month++
      if (month > 12) { month = 1; year++ }
      console.log('' + year + month)
      return '' + year + month
    }
  }
}
</script>

<style lang="scss" scoped>
.reportFormsTitle {
  text-align: center;
}
.reportFormsFooter {
  margin-top: 10px;
}
</style>
